<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="never" v-loading='loading'>
        <!-- 顶部搜索 -->
        <el-form :model="form" :inline="true">
          <el-row >
            <el-col :span="20"
              ><div class="grid-content bg-purple">
                <el-form-item prop="search" label="关键字">
                  <el-input
                    v-model="form.keyword"
                    placeholder="请输入关键词"
                    :loading="loading"
                  ></el-input>
                </el-form-item></div
            ></el-col>

            <el-col :span="4"
              ><el-form-item>
                <el-button size="small" @click="handleClear()">清除</el-button>
                <el-button size="small" type="primary" @click="handleSearch">搜索</el-button>
              </el-form-item>
              <div class="grid-content bg-purple"></div
            ></el-col>
          </el-row>
        </el-form>

         <!-- 警告框 -->
        <el-alert :closable="false" type="info" show-icon> 数据一共{{ total }}条</el-alert>
      </el-card>

       <!-- 表单数据 -->
        <el-table
          :data="formList"
          v-loading="loading"
          style="width: 100%;padding:0 20px"
          :header-cell-style="{background:'#f0f4ff'}"

        >
          <el-table-column prop="id" label="编号" width="200">
          </el-table-column>
          <el-table-column prop="questionType" :formatter="formquestionType" label="题型" width="100">
          </el-table-column>
          <el-table-column prop="questionIDs" label="题目编号"  width="200">
            <template slot-scope="scope">
            <div v-for="item in scope.row.questionIDs" :key="item.number">
              <a href="#" @click.prevent="openPreviewDialog(item)" style="color:#09f;">{{item.number}}</a>
            </div>
          </template>
          </el-table-column>
          <el-table-column
            prop="addTime"
            label="录入时间"
            width="160"
            :formatter="formatting"
          >
          </el-table-column>
          <el-table-column prop="totalSeconds" label="答题时间(s)"> </el-table-column>
          <el-table-column prop="accuracyRate" label="正确率(%)"></el-table-column>
          <el-table-column prop="userName" label="录入人"> </el-table-column>
          <!-- 操作内容 -->
          <el-table-column  width="100" label="操作">
            <template #default="{ row }" width="150">
             <div class="hoverss">
               <el-button
                @click="handleDel(row.id)"
                 icon="el-icon-delete"
                 circle
                 plain
                 type="danger"
                ></el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
                <!-- 分页 -->
        <div class="pagination">
          <el-pagination
            :current-page="page"
            :page-sizes="[2, 4, 6, 8, 10, 12, 14, 16, 18, 20]"
            :page-size="pagesize"
            layout="prev, pager, next,sizes, jumper"
            :total="total"
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          >
          </el-pagination>
        </div>
        <!-- 弹框 -->
        <questions-preview ref="questionPreview" :showDialog.sync="showDialog" :data="questionInfo" @questions-preview="reqRandoms"></questions-preview>
    </div>
  </div>
</template>

<script>
import { randoms, removeRandoms } from '@/api/hmmm/questions.js'
import { questionType, difficulty } from '@/api/hmmm/constants.js'
import questionsPreview from '@/module-hmmm/components/questions-preview.vue'
import dayjs from 'dayjs'
export default {
  components: {
    questionsPreview
  },
  data () {
    return {
      showDialog: false,
      form: {
        keyword: null,
        page: 1,
        pagesize: 20
        // id: null,
        // tyquestionTypepe: null,
        // questionIDs: null,
        // addTime: null,
        // totalSeconds: null,
        // accuracyRate: null,
        // userName: null
      },
      // hhformList: {
      //   page: 1,
      //   pagesize: 5,
      //   id: null,
      //   tyquestionTypepe: null,
      //   questionIDs: null,
      //   addTime: null,
      //   totalSeconds: null,
      //   accuracyRate: null,
      //   userName: null
      // },
      formList: [],
      loading: false,
      options: [],
      value: [],
      list: [],
      total: 0, // 总条数
      page: 1,
      pagesize: 20,
      // keyword: null,
      questionInfo: {},
      difficulty
    }
  },

  created () {
    this.reqRandoms()
  },
  methods: {
    // 1. 搜索
    handleSearch () {
      this.reqRandoms(this.form)
    },
    // 2. 获取组题列表
    async reqRandoms () {
      this.loading = true
      const { data } = await randoms(this.form)
      console.log(data, '---------------')
      this.formList = data.items
      this.total = data.counts
      // console.log(data.items.questionIDs, '11111111111')
      this.loading = false
    },
    // 3. 当前每页显示的条数发生变化时
    handleSizeChange (val) {
      // console.log(`每页 ${val} 条`)
      this.form.pagesize = val
      // 回到第一页
      this.form.page = 1
      // 拉取更新
      this.reqRandoms(this.form)
    },
    // 4.当页码发生变化时
    handleCurrentChange (val) {
      this.form.page = val
      // 拉取更新
      // this.getList({ page: this.page })
      this.reqRandoms(this.form)
    },
    // 5.对题型进行格式化（枚举）
    formquestionType (row, column, cellValue, index) {
      const obj = questionType.find(item => item.value === +cellValue)
      return obj ? obj.label : '未知'
    },
    // 6.点击删除
    handleDel (id) {
      this.$confirm('删除后不可恢复', '温馨提示', { type: 'warning' }).then(async () => {
        await removeRandoms({ id })
        // 提示用户
        this.$message.success('删除成功')
        if (this.formList.length === 1 && this.page > 1) {
          this.form.page--
        }
        this.reqRandoms()
      })
    },
    // 7.清空输入框内容
    handleClear (form) {
      this.form = {
        keyword: null,
        page: 1,
        pagesize: 20
      }
      this.reqRandoms()
    },
    // 8.点击按钮展示弹框
    openPreviewDialog (questionInfo) {
      this.questionInfo = questionInfo
      this.showDialog = true
      this.reqRandoms()
    },
    // 格式化时间
    formatting (row, column, cellValue, index) {
      return dayjs(cellValue).format('YYYY-MM-DD HH:mm:ss')
    }

  }
}
</script>

<style lang="scss" scoped>
.right {
  float: right;
}
.pagination{
  float: right;
}

</style>
